<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table ref="dataTableRef" v-loading="loading" :data="list" highlight-current-row border>
        <el-table-column :label="$t('smtp.templateName')" prop="templateName" />
        <el-table-column :label="$t('smtp.templateSubject')" prop="subject" />
        <el-table-column :label="$t('common.createdAt')" prop="createdAt">
          <template #default="scope">
            {{ dayjs(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.action')">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row.templateName)">
              <Edit />
              {{ $t("common.edit") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialog.visible">
      <el-form>
        <el-form-item :label="$t('smtp.templateSubject')">
          <el-input v-model="textarea.subject" />
        </el-form-item>
        <el-form-item :label="$t('smtp.templateContent')">
          <el-input
            v-model="textarea.content"
            style="width: 100%"
            :rows="10"
            type="textarea"
            placeholder=""
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handClose">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" @click="handleSubmit">{{ $t("common.confirm") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
defineOptions({
  name: "EmailTemplates",
  inheritAttrs: false,
});

import SmtpAPI, { EmailTemplate } from "@/api/system/smtp";

const loading = ref(false);
const list = ref<EmailTemplate[]>();
const dialog = ref({
  visible: false,
  title: t("smtp.templateContent"),
});
const textarea = reactive<EmailTemplate>({
  content: "",
  templateName: "",
  subject: "",
});

function handleQuery() {
  loading.value = true;
  SmtpAPI.getTemplateList()
    .then((res) => {
      list.value = Object.values(res);
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleEdit(templateName: string) {
  textarea.content = "";
  textarea.subject = "";
  textarea.templateName = templateName;
  SmtpAPI.getByTemplateName(templateName).then((res) => {
    textarea.content = res.content;
    textarea.subject = res.subject;
    dialog.value.visible = true;
  });
}

function handClose() {
  dialog.value.visible = false;
  textarea.content = "";
  textarea.templateName = "";
  textarea.subject = "";
}

function handleSubmit() {
  SmtpAPI.updateContentByTemplateName(textarea).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(t("common.updatedSuccess"));
      dialog.value.visible = false;
      handleQuery();
    }
  });
}

onMounted(() => {
  handleQuery();
});
</script>
